<style lang="scss" scoped>
</style>

<template>
  <div ref="container" class="container hasNav hasTabbar home">
    <van-nav-bar title="医疗知识库" fixed />
    <van-swipe :height="150" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banners" :key="index">
          <van-image width="100%" height="100%" fit="cover" :src="item.picUrl"></van-image>
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" :column-num="3" :gutter="10" style="margin-top: 20px;">
      <van-grid-item to="/disease/index">
        <van-image src="https://hongtech.xyz/system-file/3.jpg" />
        <span>疾病知识</span>
      </van-grid-item>
      <van-grid-item to="/firstaid/index">
        <van-image src="https://hongtech.xyz/system-file/1.jpeg" />
        <span>急救知识</span>
      </van-grid-item>
      <van-grid-item to="/drug/index">
        <van-image src="https://hongtech.xyz/system-file/2.jpg" />
        <span>药品知识</span>
      </van-grid-item>
    </van-grid>
    <!-- 常见疾病 -->
    <disease-list :list="diseaseList"></disease-list>
    <Loading :isShow="loading"></Loading>
    <!-- 返回顶部 -->
    <back-top selector=".container"></back-top>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import mixin from '@/mixin/index';
import Loading from '@/components/Loading';
import Tabbar from '@/components/Tabbar';
import BackTop from '@/components/BackTop';
import DiseaseList from '@/components/DiseaseList';

import { getBannerList, getDiseaseList } from '../api/index';

export default {
  name: 'Home',
  components: {
    BackTop,
    Loading,
    Tabbar,
    DiseaseList,
  },
  mixins: [mixin],
  data() {
    return {
      loading: true,
      banners: [],
      pageNo: 1,
      pageSize: 10,
      isCompleted: false,
      diseaseList: []
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeMount() {
    this.getData();
    this.getDiseaseData();
  },
  mounted() {
    this.bindScroll('container', () => {
      if (!this.isCompleted) {
        this.pageNo += 1;
        this.getDiseaseData();
      }
    });
  },
  methods: {
    ...mapMutations(['setBanners']),
    async getData(clear = false) {
      try {
        this.loading = true;
        const { code, msg, data } = await getBannerList();
        if (code == 200) {
          if (data.length !== 0) {
            this.banners = data;
            this.setBanners(data);
          }
        } else {
          this.$toast(msg);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    async getDiseaseData(clear = false) {
      try {
        this.loading = true;
        const { code, msg, rows } = await getDiseaseList({
          page: this.pageNo,
          size: this.pageSize
        });
        if (code == 200) {
          if (rows.length !== 0) {
            if (clear) {
              this.diseaseList = [];
            }
            this.diseaseList.push(...rows);
          } else {
            this.isCompleted = true;
          }
        } else {
          this.$toast(msg);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.home {
  overflow-y: auto;
  padding-bottom: 0.5rem;
  height: 100vh;
}
</style>